<template>
  <div>
    <div class="tab">
      <div class="title">文与字</div>
    </div>
    <div class="banner">
      <el-carousel trigger="click" height="700px">
        <el-carousel-item v-for="item in list" :key="item._id">
          <img
            :src="item.imgSrc"
            alt=""
            style="width: 100%; height: 100%; border-radius: 10px"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div class="item" v-for="item in list" :key="item._id">
        <div class="itemHeader">
          <img :src="item.avatar" />
          <div>{{ item.date }}</div>
        </div>
        <div>
          <div @click="handleArticleDetail(item._id)">{{ item.title }}</div>
          <img mode="aspectFill" :src="item.imgSrc" />
        </div>
        <div class="itemFooter">
          <div class="txtCtn">
            {{ item.content }}
          </div>
          <div class="detail">
            <div>
              <img :src="chatImg" />
              <span>{{ item.collectNum }}</span>
            </div>
            <div>
              <img :src="viewImg" />
              <span>{{ item.reading }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      chatImg: require("../../assets/icon/chat1.png"),
      viewImg: require("../../assets/icon/view.png"),
    };
  },
  methods: {
    handleArticleDetail(val){
      this.$router.push(`/article/detail?id=${val}`);
    }
  },
  mounted() {
    this.$http("http://47.108.197.28:4000/api/article").then((res) => {
      this.list = res.data.res;
    });
  },
};
</script>

<style scoped>
.tab {
  position: relative;
  text-align: center;
  line-height: 80px;
  height: 80px;
  background-color: rgb(83, 120, 134);
  color: #fff;
}
.title {
  font-size: 28px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.item {
  background-color: #fff;
  margin-bottom: 30px;
  box-sizing: border-box;
}
.item > div:nth-child(2) div {
  padding: 20px;
  box-sizing: border-box;
  font-weight: 800;
}
.itemHeader {
  height: 80px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.itemHeader img {
  width: 70px;
  height: 70px;
}
.itemHeader div {
  font-size: 28px;
  color: #666;
  margin-left: 50px;
}
.item > div:nth-child(2) img {
  width: 100%;
}

.itemFooter {
  padding: 16px 14px;
  box-sizing: border-box;
}

.txtCtn {
  color: rgba(68, 68, 68, 0.767);
  font-size: 28px;
  letter-spacing: 2px;
}
.detail img {
  width: 30px;
  height: 30px;
}
.detail {
  color: rgba(68, 68, 68, 0.767);
  font-size: 24px;
  padding-top: 10px;
  box-sizing: border-box;
  display: flex;
}
.detail > div {
  display: block;
  width: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 30px;
}
</style>